<template>
    <div>
        <!-- 搜索栏 -->
        <el-card>
            <el-row :gutter="20" class="header">
                <el-col :span="7">
                    <el-input placeholder="请输入商品大类名称..." clearable v-model="queryFrom.query"></el-input>
                </el-col>
                <el-button type="primary" icon="el-icon-search" @click="handleInitBigTypeList()">搜索</el-button>
                <el-button type="primary" icon="el-icon-document-add" @click="handleDialogValue()">添加商品大类</el-button>
            </el-row>
        </el-card>

        <!-- 表格 -->
        <el-table style="width: 100%;" border :data="list">
            <el-table-column type="index" label="序号" width="80" align="center">
            </el-table-column>
            <el-table-column prop="categoryName" label="商品大类名称" width="400">
            </el-table-column>
            <el-table-column label="商品大类图片" width="width">
                <template slot-scope="{row,$index}">
                    <img :src="row.icon" alt="" style="width: 80px;height: 80px;" />
                </template>
            </el-table-column>
            <el-table-column prop="prop" label="操作" width="500" fixed="right">
                <template slot-scope="{row,$index}">
                    <el-button type="success" @click="handleImageDailogValue(row)">更换图片</el-button>
                    <el-button type="primary" icon="el-icon-edit-outline" @click="handleDialogValue(row.id)"></el-button>
                    <el-button type="danger" icon="el-icon-delete" @click="handleDeleteBigCategory(row.id)"></el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <el-pagination style="margin-top: 20px;text-align: center;" :current-page="1" :total="total" :page-size="size"
            :pager-count="7" :page-sizes="[2, 3, 4]" layout="prev,pager,next,jumper,->,total,sizes"
            @size-change="handleSizeChange" @current-change="initBigTypeList">
        </el-pagination>

        <!-- 对话框 -->
        <Dialog v-model="dialogVisible" :dialogVisible="dialogVisible" @click="handleClose" :dialogTitle="dialogTitle"
            @initBigTypeList="initBigTypeList"></Dialog>
        <ImageDialog v-model="imageDialogVisible" :imageDialogVisible="imageDialogVisible"
            :imageDialogValue="imageDialogValue" @click="handleClose2" @initBigTypeList="initBigTypeList">
        </ImageDialog>
    </div>
</template>

<script>
import Dialog from './components/dialog.vue'
import ImageDialog from './components/imageDialog.vue'

export default {
    components: {
        Dialog,
        ImageDialog
    },
    name: 'big-category',
    data() {
        return {
            // 控制对话框的显示状态
            dialogVisible: false,
            imageDialogVisible: false,
            // 图片上传内容
            imageDialogValue: {},
            dialogTitle: '',
            // 订单查询参数
            queryFrom: {
                query: ''
            },
            // 列表展示的订单数据
            list: [],
            // 代表分页器第几页
            current: 1,
            // 当前页数展示数据条数
            size: 3,
            // 总共数据条数
            total: 0,
        }
    },
    mounted() {
        this.initBigTypeList();
    },
    methods: {
        // 初始化商品大类数据
        async initBigTypeList(pager = 1) {
            console.log(pager);
            this.current = pager;
            const { current, size } = this;
            let result = await this.$API.category.reqCategoryList({ current: current, size: size });
            if (result.code == 0) {
                this.list = result.data.records;
                this.total = result.data.total;
            }
        },
        // 更换图片
        handleImageDailogValue(row) {
            this.imageDialogVisible = true;
            this.imageDialogValue = JSON.parse(JSON.stringify(row))
        },
        // 当分页器某一页需要展示数据条数发生变化时触发
        handleSizeChange(size) {
            this.size = size;
            this.initBigTypeList();
        },
        // 处理搜索栏根据分类名称搜索
        async handleSearchCategoryByName() {
            let result = await this.$API.order.reqSearchOrderById(this.queryFrom.query);
            if (result.code == 200) {
                this.list = result.data;
            }
            this.getOrderList();
        },
        // 处理添加商品大类
        handleDialogValue(bigTypeId) {
            this.dialogVisible = true;
            if (bigTypeId) {
                this.id = bigTypeId;
                this.dialogTitle = '修改商品大类';
            } else {
                this.id = -1;
                this.dialogTitle = '添加商品大类';
            }
        },
        // 删除相应商品大类
        handleDeleteBigCategory() {
            
        },
        // 控制子组件的对话框
        handleClose() {
            this.dialogVisible = false;
        },
        handleClose2() {
            this.imageDialogVisible = false;
        }
    }
}

</script>

<style lang="scss" scoped>
.header {
    padding-bottom: 16px;
    box-sizing: border-box;
}
</style>